<template>
  <div class="repair-create-page">
    <el-card>
      <div style="font-weight: bold; margin-bottom: 16px;">报修录入</div>
      <el-form :model="form" label-width="100px" style="max-width: 600px;">
        <el-form-item label="标题" required>
          <el-input v-model="form.title" placeholder="请输入报修标题" />
        </el-form-item>
        <el-form-item label="类型" required>
          <el-select v-model="form.typeId" placeholder="请选择报修类型">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容" required>
          <el-input v-model="form.content" type="textarea" rows="4" placeholder="请描述报修内容" />
        </el-form-item>
        <el-form-item label="申请人" required>
          <el-input v-model="form.applicantName" placeholder="请输入申请人姓名" />
        </el-form-item>
        <el-form-item label="联系方式" required>
          <el-input v-model="form.contact" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="报修地点" required>
          <el-input v-model="form.location" placeholder="请输入报修地点" />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            :action="uploadUrl"
            :data="{ requestId: tempRequestId }"
            :on-success="onUploadSuccess"
            :show-file-list="false"
            :headers="uploadHeaders"
            multiple
            drag
          >
            <el-icon><UploadFilled /></el-icon>
            <div>点击或拖拽上传附件（需先提交报修单）</div>
          </el-upload>
          <div v-if="attachments.length > 0" style="margin-top: 8px;">
            <el-tag v-for="item in attachments" :key="item.id" closable @close="onDeleteAttachment(item)">{{ item.fileName }}</el-tag>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交报修</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const form = reactive({
  title: '',
  typeId: null,
  content: '',
  applicantId: null, // 新增字段
  applicantName: '',
  contact: '',
  location: ''
})
const typeList = ref([])
const tempRequestId = ref(null)
const attachments = ref([])
const uploadUrl = '/api/repair/attachment' // 需代理/api到后端
const uploadHeaders = {} // 如需token可补充

const fetchTypeList = async () => {
  const res = await request.get('/repair/type/list')
  if (res.code === 1) {
    typeList.value = res.data
  }
}
const onSubmit = async () => {
  if (!form.title || !form.typeId || !form.content || !form.applicantName || !form.contact || !form.location) {
    ElMessage.warning('请填写完整信息')
    return
  }
  const res = await request.post('/repair/request', form)
  if (res.code === 1) {
    ElMessage.success('报修提交成功，请等待审核！')
    tempRequestId.value = res.data?.id || null
    fetchAttachments()
  } else {
    ElMessage.error(res.msg || '提交失败')
  }
}
const onUploadSuccess = () => {
  ElMessage.success('上传成功')
  fetchAttachments()
}
const fetchAttachments = async () => {
  if (!tempRequestId.value) return
  const res = await request.get('/repair/attachment/list', { params: { requestId: tempRequestId.value } })
  if (res.code === 1) {
    attachments.value = res.data
  }
}
const onDeleteAttachment = async (item) => {
  await request.delete(`/repair/attachment/${item.id}`)
  ElMessage.success('删除成功')
  fetchAttachments()
}
onMounted(() => {
  fetchTypeList()
  // 自动获取当前登录用户id
  const loginUser = JSON.parse(localStorage.getItem('loginUser'))
  if (loginUser && loginUser.id) {
    form.applicantId = loginUser.id
  }
})
</script>

<style scoped>
.repair-create-page {
  padding: 24px;
}
</style> 